<template>
  <div class="c-h c-w100">
    <div v-if="bingStatus == false">
      <div class="" v-if="type==1">
        <div class="c-w100 c-hh48 c-lh48 c-fs20 c-p">
          <div class="c-w100 c-hh48 c-lh48 c-bg-lred c-opacity10"></div>
          <div class="c-pa c-p-l24 c-p-t0 c-fc-xlred">请保证所填写的学员信息，管理员已经收录过！</div>
        </div>
        <div class="c-fs24 c-pv28 c-bd-b1 c-flex-row c-aligni-center c-justify-sb c-ph24">
          <div>
            <span class="c-fc-xlred c-pr10">*</span>
            <span>学员姓名</span>
          </div>
          <input type="text" class="c-bd0 c-textAlign-r c-fs24" placeholder="请输入姓名" v-model="studentName">
        </div>
        <div class="c-fs24 c-pv28 c-bd-b1 c-flex-row c-aligni-center c-justify-sb c-ph24">
          <div>
            <span class="c-fc-xlred c-pr10">*</span>
            <span>学员手机号</span>
          </div>
          <input type="tel" maxlength="11" class="c-bd0 c-textAlign-r c-fs24" placeholder="请输入正确的手机号" v-model="mobile">
        </div>
        <div class="c-fs24 c-pv28 c-bd-b1 c-flex-row c-aligni-center c-justify-sb c-ph24">
          <div>
            <span class="c-fc-xlred c-pr10">*</span>
            <span>验证码</span>
          </div>
          <input type="tel" maxlength="4" @input="code=code.slice(0, 4)" class="c-bd0 c-textAlign-r c-fs24" placeholder="请输入短信验证码" v-model="code">
          <div class="c-ml20 theme-bg-gradient c-fc-white c-br21 c-ww130 c-hh42 c-lh42 c-fs20 c-textAlign-c" @click="sendCode">{{textTip}}</div>
        </div>
      </div>
      <div class="c-w100 c-hh16 c-bg-sgray"></div>
      <div class="c-pl80 c-pr60">
        <div class="c-flex-row c-flex-center c-w100 c-pt60 c-pb80">
          <span class="iconfont c-fc-smblue c-fs80">&#xe928;</span>
          <span class="iconfont c-ph40 c-fc-sgray">&#xe929;</span>
          <span class="iconfont c-fc-deepGreen c-fs80">&#xe92a;</span>
        </div>
        <template>
          <div class="c-fs24 c-textAlign-c c-mb80 c-fc-gray c-lh36">绑定后，您将能在移动端进行{{type == 3 ? '查看课表、课堂管理' : '预约课程、查看课表、签到消课'}}等操作</div>
        </template>
        <div class="c-fs28 c-textAlign-c theme-bg-gradient c-fc-white c-ww240 c-hh64 c-lh64 c-br32 c-flex-row c-flex-center c-mlr-auto" @click="goBind">立即绑定</div>
      </div>
    </div>
    <div v-if="bingStatus" class="pt280">
      <div class="iconfont c-fs92 theme-fc c-textAlign-c">&#xe95a;</div>
      <div class="c-fs28 c-mt64 c-textAlign-c">恭喜,绑定成功</div>
      <template v-if="type == 3">
        <div class="c-fs28 c-textAlign-c theme-bg-gradient c-fc-white c-ww240 c-hh64 c-lh64 c-mt100 c-br32 c-flex-row c-flex-center c-mlr-auto" @click="handleClickRoute">查看我的课程</div>
      </template>
      <template v-else>
        <div class="c-fs28 c-textAlign-c theme-bg-gradient c-fc-white c-ww240 c-hh64 c-lh64 c-mt100 c-br32 c-flex-row c-flex-center c-mlr-auto" @click="goIndex">返回课程表</div>
      </template>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
let num = 60;
let clickBtn = false;
export default {
  name: "EduScan",
  components: {},
  props: [],
  beforeCreate() { },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      sess: "",
      bingStatus: false, //true出现绑定成功页面
      type: "", //0不需要出现表单 1需要出现学员姓名和手机号表单
      studentName: "",
      mobile: "",
      code: "",
      isClick: false,
      textTip: "获取验证码",
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    getCode() {
      num--;
      this.textTip = num + "s";
      if (num == 0) {
        this.textTip = "发送验证码";
        num = 60;
        this.isClick = false;
        clearInterval(this.interval);
      }
    },
    sendCode() {
      if (!this.isClick) {
        this.isClick = true;
        utilJs.postMethod(global.apiurl + "educationSystem/student/sms", { mobile: this.mobile, location: 1 }, res => {
          this.interval = setInterval(this.getCode, 1000);
        }, failRes => {
          this.isClick = false;
        });
      }
    },
    goBind() {
      if (this.type == 1) {
        if (this.studentName == "") {
          this.$showCjToast({
            text: "请输入姓名",
            type: "warn",
          });
          return;
        }
        if (this.mobile == "") {
          this.$showCjToast({
            text: "请输入手机号码",
            type: "warn",
          });
          return;
        } else if (!utilJs.isPhoneNumber(this.mobile)) {
          this.$showCjToast({
            text: "请输入有效手机号",
            type: "warn",
          });
          return;
        }
        if (this.code == '') {
          this.$showCjToast({
            text: "请输入验证码",
            type: "warn",
          });
          return;
        }
      }
      if (clickBtn) {
        return;
      }
      clickBtn = true;
      utilJs.postMethod(
        global.apiurl + "educationSystem/getWxInfo", { sess: this.sess, type: this.type, studentName: this.studentName, mobile: this.mobile, code: this.code }, res => {
          this.bingStatus = true;
          clickBtn = false;
        }, failRes => {
          clickBtn = false;
        });
    },
    goIndex() {
      this.$routerGo(this, "push", {
        path: "/edu/faceTeaching",
        query: {
          faceType: 0
        }
      })
    },
    handleClickRoute() {
      this.$routerGo(this, "push", {
        path: "/edu/courseManagment",
      })
    },
    //分享
    wechatShare: function () {
      let title = '';
      if (this.type == 3) {
        title = "老师绑定";
      } else {
        title = "学员绑定";
      }
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduScan/?sess=' + this.sess + '&type=' + this.type + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '';
      if (this.type == 3) {
        title = "老师绑定";
      } else {
        title = "学员绑定";
      }
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduScan/?sess=' + this.sess + '&type=' + this.type + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    this.type = this.$route.query.type;
    this.bingStatus = false;
    if (this.type == 1 && this.bingStatus == false) {
      setDocumentTitle("学员绑定"); // eslint-disable-line
    } else if (this.type == 3) {
      setDocumentTitle("老师绑定"); // eslint-disable-line
    } else {
      setDocumentTitle("微信登陆"); // eslint-disable-line
    }
    this.sess = this.$route.query.sess;
    this.isClick = false;
    this.studentName = "";
    this.mobile = "";
    this.code = "";
    num = 60;
    this.textTip = "获取验证码";
    this.wechatShare();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pt280 {
  padding-top: 7rem;
}
</style>